<template>
	<view class="MyComments">
		<view class="MyComments_item" v-for="(item, index) in goodsList" :key="item.id">
			<view class="MyComments_item_demo">
				<view class="MyComments_item_demo_left">
					<image :src="$wanlshop.oss(item.image, 40,40)" mode="aspectFill"></image>
				</view>
				<view class="MyComments_item_demo_right">
					{{item.title}}
				</view>
			</view>
			<view class="MyComments_item_demo1">
				<view class="MyComments_item_demo1_rote">综合评分</view>
				<view class="uni-flex">
					<wanl-rate :quantity="5" :current="shop.logistics" :size="25" normal="#dcdcdc" active="#ff3200" :hollow="true" @change="logisticsChange" />
					<view class="margin-left wanl-gray-light">
						{{shop.logisticsInfo}}
					</view>
					
				</view>
			</view>
			<view class="MyComments_item_demo2">
				<textarea class="textarea" placeholder="从多个角度评价商品,可以帮助更多想买的人" placeholder-class="iconfont icon-bianji"
					disable-default-padding="true" v-model="item.comment" maxlength="-1"></textarea>
				<!-- <view class="iconfont icon-bianji icon"></view> -->
				<!-- <input type="text"
				 placeholder-class="iconfont icon-bianji"  
				 placeholder="说点什么"  /> -->
			</view>
			<view class="MyComments_item_demo3">
				<view class="flex-sub">
					<view class="bg-img" v-for="(vo, key) in item.imgList" :key="key" @tap="viewImage(index,key)">
						<image :src="$wanlshop.oss(vo, 40,40)" mode="aspectFill"></image>
						<view class="cu-tag " @tap.stop="delImg(index, key)">
							<text class="iconfont icon-close"></text>
						</view>
					</view>
					
					<view class="solids" @tap="chooseImage(index)" v-if="item.imgList.length <9">
						<image src="../../../static/image/user/xiangji.png"></image>
						<view>上传买家秀</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="MyComments_item1" @tap="addData()">发布</view>
	</view>
</template>

<script>
	import wanlRate from '@/components/wanl-rate/wanl-rate.vue'
	export default {
		data() {
			return {
				clicked_list: [false, false, false, false, false], //对应星星个数
				// 上传图片相关参数
				control: true,
				columnNum: 4,
				imgList: [],
				order_id: 0,
				shop: {
					id: 0,
					shopname: '',
					describe: 0,
					describeInfo: '',
					logistics: 0,
					logisticsInfo: '',
					service: 0,
					serviceInfo: '',
					deliver: 0,
					deliverInfo: ''
				},
				goodsList: []
			};
		},
		components: {
			wanlRate
		},
		methods: {
			
			logisticsChange(e) {
				this.shop.logistics = e.index;
				this.shop.logisticsInfo = this.scoreInfo(e.index);
			},

			delImg(index,key) {
				console.log('00000')
				this.goodsList[index].imgList.splice(key, 1);
			},
			chooseImage(index) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage == 'local' ? null : updata.multipart,
												success: data => {
													this.goodsList[index].imgList.push(data.fullurl);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			scoreInfo(index){
				if(index == 1){
					return '极差';
				}else if(index == 2){
					return '差';
				}else if(index == 3){
					return '一般';
				}else if(index == 4){
					return '好';
				}else if(index == 5){
					return '极好';
				}
			},
			viewImage(index,key) {
				uni.previewImage({
					urls: this.goodsList[index].imgList,
					current: this.goodsList[index].imgList[key]
				});
			},
			// 提交评论
			async addData() {
				// 判断是否给店铺评分，其他可以不填写，默认好评
				if ( this.shop.logistics == 0 ) {
					this.$wanlshop.msg('请给店铺评分');
					return false;
				}
				let data = {
					order_id : this.order_id,
					shop : {
						id : this.shop.id,
						describe : this.shop.describe,
						logistics : this.shop.logistics,
						service : this.shop.service,
						deliver : this.shop.deliver						
					},
					goodsList : this.goodsList
				};
				this.$api.post({
					url: '/wanlshop/order/commentOrder',
					data: data,
					success: res => {
						this.$store.commit('statistics/order', {
							evaluate: this.$store.state.statistics.order.evaluate - 1
						});
						this.$wanlshop.to('/pages/page/success?type=comment');
					}
				});
			},
			async loadData(order_id) {
				this.$api.get({
					url: '/wanlshop/order/getOrderInfo',
					data: {
						id: order_id
					},
					success: res => {
						console.log('res', res);
						this.order_id = res.id;
						this.shop.id = res.shop_id;
						this.shop.shopname = res.shop.shopname;
						var newItems = [];
						res.goods.forEach((item, index) => {
							newItems.push({
								id: item['id'],
								goods_id: item['goods_id'],
								difference: item['difference'],
								image: item['image'],
								title: item['title'],
								imgList: [],
								comment: '',
								state: 0
							});
						})
						this.goodsList = newItems;
						console.log('goodsList', this.goodsList)
					}
				});
			}
		},
		onLoad(option) {
			this.loadData(option.order_id);
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	
	.MyComments {
		&_item {
			background-color: #FFFFFF;
			width: 700rpx;
			// height: 500rpx;
			border-radius: 10rpx;
			margin: 25rpx auto;
			box-sizing: border-box;
			padding: 20rpx 25rpx;

			&_demo {
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;

				&_left {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
				}

				&_right {
					font-size: 24rpx;
					color: #282828;
					// background-color: red;
					width: 530rpx;
					// 多行显示超出部分显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					word-break: break-all;
				}
			}

			&_demo1 {
				// background-color: pink;
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				&_rote {
					font-size: 26rpx;
					color: #282828;
					margin-left: 20rpx;
				}

				.uni-flex {
					// background-color: #4CD964;
					margin-left: 20rpx;
					width: 450rpx;
					display: flex;
					align-items: center;
                    .margin-left{
						font-size: 26rpx;
						color: #7d7d7d;
						margin-left: 10rpx;
					}
					

				}
			}

			&_demo2 {
				// background-color: pink;
				margin-left: 20rpx;
				margin-bottom: 30rpx;
				position: relative;

				.textarea {
					// background-color: red;
					font-size: 26rpx;
					// // padding-left: 20rpx;
					// text-indent: 2em;
					padding-left: 20rpx;
				}

				.icon {
					font-size: 30rpx;
					color: #7d7d7d;
					position: absolute;
					top: 0;
					left: 10rpx;
				}
			}

			&_demo3 {
				// background-color: pink;// background-color: pink;
				// height: 200rpx;

				.flex-sub {
					// background-color: #007AFF;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					

					.bg-img {
						width: 150rpx;
						height: 120rpx;
						// background-color: #1CBBB4;
						position: relative;
						margin-right: 13rpx;
						margin-bottom: 13rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}

						.cu-tag {
							position: absolute;
							top: -6rpx;
							right: -6rpx;
							width: 35rpx;
							height: 35rpx;
							background-color: #bcbcbc;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;

							.iconfont {
								font-size: 22rpx;
								color: #FFFFFF;
							}
						}
					}
				}

				.solids {
					width: 150rpx;
					height: 120rpx;
					background-color: #f2f2f2;
					// border-radius: 8rpx;
					color: #bcbcbc;
					font-size: 20rpx;
					text-align: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 15rpx;
					}
				}

				&_img {
					width: 150rpx;
					height: 100rpx;
					background-color: #f2f2f2;
					// border-radius: 8rpx;
					color: #bcbcbc;
					font-size: 20rpx;
					text-align: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 15rpx;
					}
				}

				.g-upload {
					// background-color: #4CD964;
				}

				// 上传控件
				.uploadControl {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					width: 130rpx;
					display: block;
					height: 130rpx;
					text-align: center;
					line-height: 130rpx;
					font-size: 30rpx;
					color: #888;
					// background-color: #EEEEEE;
					// background-color: red;

				}
			}
		}

		&_item1 {
			background-color: #ff3200;
			font-size: 26rpx;
			color: #FFFFFF;
			border-radius: 50rpx;
			height: 70rpx;
			line-height: 70rpx;
			width: 700rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
